<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery的使用第一节课</title>
</head>
<style>
  .hied{
    display: none;
  }
  .color{
    background-color: coral;
  }

  .temp{
    margin-top: 50px;
  }
  .temp-div{
    width: 100px;
    height: 100px;
    border: solid 1px black;
    background-color: blanchedalmond;
  }
  .prop{
    width: 100px;
    height: 100px;
    background-color: coral;
  }
</style>
<body>
  <!-- <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button> -->

  <div>
    <img src="../image/1.jpg" alt="" class="image"><br>
    <button class="togglt color">1</button>
    <button class="togglt">2</button>
    <button class="togglt">3</button>
    <button class="togglt">4</button>
    <button class="xs">显示</button>
    <button class="yc">隐藏</button>
    <button class="none">显示/隐藏</button>
  </div>

  <div class="temp">
    <div class="temp-div">
      <button>按钮</button>
    </div>
    <div class="temp-div">
      <button>按钮</button>
    </div>
    <div class="temp-div">
      <button>按钮</button>
    </div>
  </div>

  <div>
    <input type="text">
    <button class="add">添加</button>
    <ul class="list">  
      <li>香蕉</li>
      <li>苹果</li>
      <li>鸭梨</li>
    </ul>
    <div class="prop"></div>
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
  </div>

  <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
  <script src="./jquery-3.6.0/jQuery3.6.js"></script>
  <script>
    // 获取节点$("选择器")

    $("button").click(function(event){
      // console.log($(this));
      var e = event || window.event,
          tar = e.target || e.srcElement;
          val = tar.value;
      // console.log($(this).text("新文本"));

      // 获取元素下标
      // console.log($(this).index());

      // 获取文本
      // console.log($(this).text());

      // 设置修改按钮的值
      // console.log($(this).text("新文本"));

      // 修改高度
      // $(this).height('100px')
      // $(this).css("height", "100px");

      // 设置value属性何设置value属性
      $(this).val("新value值");
      // console.log(this);
    })

    ;(function(){
      let imgSrc = [
        "../image/1.jpg",
        "../image/2.jpg",
        "../image/3.jpg",
        "../image/4.jpg",
      ]
      // 实现点切换图片
      $(".togglt").click(function(){
        let index = $(this).index() - 2;
        $(this).addClass('color');
        $(this).siblings().removeClass('color');
        $("img").attr("src", imgSrc[index]);
      })

      // 实现点击按显示图片
      $(".xs").click(function(){
        $("img").removeClass("hied");
      })

      // 实现点击隐藏图片
      $('.yc').click(function(){
        $("img").addClass('hied');
      })

      // 实现点击按钮切换显示隐藏
      $(".none").click(function(){
        $('img').toggleClass('hied');
      })

      //修改子元素
      $(".temp-div").click(function(){
        $(this).find("button").css("background-color", "#8ecae6");
        // console.log(this);
      })

      // 修改父元素
      $(".temp-div button").click(function(){
        console.log("anniu")
        $(this).parent().css("background-color", '#219ebc')
      })
    })()


    ;(function(){
      // 添加DOM元素
      $(".add").click(function(){
        if($("input").val()){
          let value = $("input").val();
          let li = $(`<li>${value}</li>`);
          $(".list").append(li);
          $("input").val("");
        }else{
          return;
        }
      })


       // 删除DOM元素
      //  $(".list").find("li").click(function(){
      //   $(this).remove();
      // })

      // 事件委托: 建子集的事件委托给父级处理
      $(".list").on("click", "li", function(){
        $(this).remove();
      })

      // $(".prop").mousedown(function(){
      //   console.log("这是 mousedown 拖拽事件");
      // })
      // $(".prop").mouseenter(function(){
      //   console.log("这是 mouseenter 移入事件");
      // })
      // $(".pop").mouseleave(function(){
      //   console.log("这是 mouseleave 移出事件");
      // })

      $(".prop").mouseenter(function(){
        console.log("移入");
      }).mouseleave(function(){
        console.log("移出");
      }).mousemove(function(e){
        let x = e.pageX;
        let y = e.pageY;
        console.log(`x坐标: ${x}, y坐标: ${y}`);
      })


      // 点击显示
      $('.show').click(function(){
        $(".prop").show(500);
      })
      // 点击隐藏
      $(".hide").hide(function(){
        $(".prop").hide(500);
      })


    })()



  </script>
</body>
</html>